<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 声明响应式变量value
const value = ref("");
// 跳转到about页面
const onClickLeft = () => {
history.go(-1);
};
</script>

<template>


<van-sticky >
  <van-search
  v-model="value"
  right-icon="search"
  left-icon=""
  shape="round"
  background="#dcabf8"
  placeholder="请输入搜索关键词"
  @click-left-icon="onClickLeft"
  to="sreach"
>
  <template #left>
      <van-icon name="arrow-left"   @click="onClickLeft"/>

  </template>
</van-search>
</van-sticky>

<div style="background-image: url(https://pic.mdcdn.cn/h5/pic/202302/fcb53ce2467048177620858bc6f6d46c.jpg);">
  <van-cell center  style="opacity: 0.5 ;">
  
  <template #title>
    <span >智慧家厨房和热水会员店</span>
    </template>

  <template #label>
    <van-tag type="primary">官方</van-tag>
    <span class="custom-title">店铺粉丝:548</span>
</template>

  <template #value>
    <div background="#00000066">
    <van-button
    color=""
  icon="plus"
  plain hairline round type="small"
  to="login"
>
  订阅
</van-button>
</div></template></van-cell>


<van-notice-bar color="black" background="white" delay
  left-icon="volume-o"
  text="【通知】1.受天气影响，3月2日起黑龙江、山西、哈尔滨、新疆、宁夏、陕西等部分省市区域派送、退换货等服务受限，会出现延迟或停滞；2.受系统、仓库盘点、疫情区域等影响，如您的订单/售后单等出现未及时处理的情况，请您联系店铺在线客服反馈；3.注意防范诈骗，如有疑问请联系官方渠道在线客服咨询。"
  style="opacity: 0.5 ;"/>

<!--轮播图-->
<div style="text-align: center;">
	<van-swipe class="my-swipe" :autoplay="2000000" indicator-color="white">
<van-swipe-item><van-image
width="350"
height="196"
fit="contain"
src="https://pic.mdcdn.cn/h5/pic/202212/b7207b4fa1b97d7cac424195b7d63593.png"
/>

</van-swipe-item>
<van-swipe-item>
</van-swipe-item>
</van-swipe>
</div>
<!---插一张图片-->
<van-image
  width="370"
  height="94"
  src="https://pic.mdcdn.cn/h5/pic/202303/edfd063802b6a7a003675ed0249e7b9a.gif"
/>


<div style="display: flex;margin-top: 10px;">
    <img src="//pic.mdcdn.cn/h5/pic/202302/a8f562cafa1d63f1bab5ada0f3270bf6.png" style="width: 174px;height: 133px;margin-left:14px ;">
    <img src="//pic.mdcdn.cn/h5/pic/202302/97f340f4aa7948fd486a40d41e809a57.png" style="width: 174px;height: 133px;margin-left:14px ;">
</div>
<!--宫格-->
<div style="margin-top: 15px; width: 354px;margin-left: 15px;">
    <van-grid :column-num="4" :border=false icon-size="48">
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_445.png?t=20230207" text="热水器"/>
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_446.png?t=20230207" text="烟灶消" />
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_447.png?t=20230207" text="洗碗机" />
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_450.png?t=20230207" text="净饮水" />
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_449.png?t=20230207" text="集成家电" />
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_448.png?t=20230207" text="厨卫套装" />
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_452.png?t=20230207" text="厨卫周边" />
  <van-grid-item icon="https://img.mdcdn.cn/h5/img/shop/category/category_451.png?t=20230207" text="净水滤芯" />
  
</van-grid>
</div>
<!---插一张图片-->

<!--导航-->
<div style="text-align: center;font-size: 16.64px;color: #232323; margin-top: 15px;opacity: 0.5 ;">热销商品</div>

    
<van-card class="s-card" >
  <template #tags> 
       
    <van-grid :column-num="2" :center="false" :gutter="10" >

      <van-grid-item  to="info">
	<div><van-tag type="warning">官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
  width="123.99"
  height="123.99"
  src="https://pic.midea.cn/smartpic/pic/10706752a7fce4d54c41da0e65.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;font-size: 16px;">【会员年度好物】美的 洗碗机 15套  ...</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥6999</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO精选</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />	
</div>
</van-grid-item>
      

<van-grid-item  to="info">
	<div><van-tag type="warning">厨卫热卖</van-tag></div>
	<van-image
  width="123.99"
  height="123.99"
  src="https://pic.midea.cn/smartpic/pic/106f0734b99ed1d47fd89625ae.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;font-size: 16px;">【年度绿电好物】美的 柜式洗碗机  ...</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥8899</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO精选</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
</div>
</van-grid-item>
  </van-grid>
</template>
</van-card>

</div>
<van-tabbar v-model="active">
<van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
<van-tabbar-item icon="friends-o">场景</van-tabbar-item>
<van-tabbar-item icon="service-o">客服</van-tabbar-item>
</van-tabbar>



<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />


</template>

<style lang="less" scoped>
//底部

</style>
